<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%
String path=request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ROLE</title>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/js/easyui/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>/js/easyui/themes/icon.css">
<script type="text/javascript" src="<%=basePath%>/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/easyui/plugins/jquery.datagrid.js"></script>
<style type="text/css">
		/*input高亮显示*/
		input[type=text],textarea {
		  -webkit-transition: all 0.30s ease-in-out;
		  -moz-transition: all 0.30s ease-in-out;
		  -ms-transition: all 0.30s ease-in-out;
		  -o-transition: all 0.30s ease-in-out;
		  outline: none;
		  padding: 3px 0px 3px 3px;
		  margin: 5px 1px 3px 0px;
		  border: 1px solid #DDDDDD;
		}
		input[type=text]:focus, textarea:focus {
		  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
		  padding: 3px 0px 3px 3px;
		  margin: 5px 1px 3px 0px;
		  border: 1px solid rgba(81, 203, 238, 1);
		  background: #E6E6FA;
		}
		.onSuccess{
		    background:url(images/img/ok.gif) no-repeat 0 center;
		    padding-left:10px;
		}
		.high{
		    color:red;
		}
		.ftitle{
            font-size:14px;
            font-weight:bold;
            padding:5px 0;
            margin-bottom:10px;
            border-bottom:1px solid #ccc;
        }
	</style>
	<script type="text/javascript">
		$.ajaxSetup ({
			cache:false //关闭AJAX相应的缓存
		});
		$(function(){
			//如果是必填的，则加红星标识.
			$("form :input.required").each(function(){
				var $required = $("<span class='high'>*</span>"); //创建元素
				//$(this).parent().prev().append($required); //然后将它追加到文档中
				$parent=$(this).parent();
				$parent.prev().append($required);
			});
		});
		//查询、添加、修改、删除
		function query(){
		   $('#mydatagrid').datagrid('load',{
			   ROLENAME:$("#rolename").val()
		   });
	   }
		
		var url;
		var checkName=false;
		
		function newDialog(){
			$('#dlg').dialog('open').dialog('setTitle','ADD ROLE');
			$('div.ftitle').html("ADD ROLE");
			$('#fm').form('clear');
			$("form :input.required").each(function(){ //注意form后面空格
				$parent=$(this).parent();
				$parent.find(".onSuccess").remove();
			});
			checkName=false;
			checkFloorcount=false;
			$('#btn1').linkbutton({//创建linkbutton
			    iconCls:'icon-ok',
			    text:'保存'
			});
			url='<%=basePath%>role/add.action';
		}
		
		 function editor(){
				var row=$('#mydatagrid').datagrid("getSelected");
				if(row){
					$('#dlg').dialog('open').dialog('setTitle','MODIFY ROLE');
					$('div.ftitle').html("MODIFY ROLE");
					$('#fm').form('load',row);
					$('#btn1').linkbutton({//创建linkbutton
					    iconCls:'icon-ok',
					    text:'修改'
					});
					url='<%=basePath%>role/update.action';
				}else{
					$.messager.show({
						   title:'提示信息',
						   msg:'请选择需修改项！！！'
					});
				}
			}
			
			//datagrid双击事件，同editor功能
			$(function(){
				$('#mydatagrid').datagrid({
					onDblClickRow:function(rowIndex,rowData){
						//重置之前验证数据
						$("form :input.required").each(function(){ //注意form后面空格
							$parent=$(this).parent();
							$parent.find(".onSuccess").remove();
						});
						$('#dlg').dialog('open').dialog('setTitle','MODIFY ROLE');
						$('div.ftitle').html("MODIFY ROLE");
						$('#fm').form('load',rowData);
						$('#btn1').linkbutton({//创建linkbutton
						    iconCls:'icon-ok',
						    text:'修改'
						});
						url='<%=basePath%>role/update.action';
					}
				});
			});
	  	 
		function save(){
			$('#fm').form('submit',{
				url:url,
				onSubmit:function(){
					showProcess(true,'温馨提示','正在提交数据...');  //添加进度条可以防重复提交
				},
				success:function(result){
					showProcess(false);
					var result = eval('('+result+')');
                    if (result.errorMsg){
                        $.messager.show({
                            title:'提示信息',
                            msg:result.errorMsg
                        });
                    } else {
                        $('#dlg').dialog('close');        // close the dialog
                        $('#mydatagrid').datagrid('reload');    // reload the user data
                    }
				},
				onLoadError:function(){
		             showProcess(false);
		             $.messager.alert('温馨提示','由于网络或服务器太忙，提交失败，请重试！');
		         }
			});
		}
		//进度框
		function showProcess(isShow,title,msg){
			if(!isShow){
				$.messager.progress('close');
				return;
			}
			var win=$.messager.progress({
				title:title,
				msg:msg
			});
		}
		
		function del(){
			   var row=$('#mydatagrid').datagrid("getSelected");
			   if(row){
				   $.messager.confirm('消息','您确定要删除角色\''+row.roleId+'\'吗?',function(r) {
						if (r) {
							$.ajax({
								url:"<%=basePath%>role/del/"+row.roleId+".action",
								type:'post',
								timeout:5000,
								success:function(data) {
									$.messager.alert('消息',data);
									$('#mydatagrid').datagrid('reload');
								}
							});
						} 
					});
			   }else{
				   $.messager.show({
					   title:'提示信息',
					   msg:'请选择一项要删除的内容！！！'
				   });
			   }
		}
	</script>
</head>
<body>
	<div id="main-frame">
		<div id="search-content" style="float:left;margin-bottom:10px;">
		<div id="serar-panel" class="easyui-panel" style="width:1060px;height:auto;padding:3px;" 
				 title="查询" data-options="iconCls:'icon-search',collapsible:true,
				 pagination:true,
				 loadMsg:'正在加载服务器信息...'">
				<table style="font-size:12px">
					<tr>
						<td>ROLE NAME</td>
						<td><input id="rolename" class="easyui-validatebox" style="width:120px">
						</td>
						<td><a href="javascript:void(0);" class="easyui-linkbutton"
							data-options="iconCls:'icon-search'" onclick="query();">查询</a>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<div id="molitor-data-content" style="float:left;">
			<table id="mydatagrid" class="easyui-datagrid" title="ROLE INFO" style="width:1060px;height:480px"
	            data-options="singleSelect:true,
	            url:'<%=basePath%>/role/getPageList.action',
	            toolbar:'#toolbar',
	            collapsible:true,
	            rownumbers:false,
	            fitColumns:true,
	            noheader:false, //Defines if to show panel border.
	            loadMsg:'正在获取数据...',
	            pagination:true,
	            idField:'roleId'">
		        <thead>
		            <tr>
		            	<th data-options="field:'roleId',width:100,sortable:true">ID</th>
		                <th data-options="field:'rolecode',width:100,sortable:true">角色编码</th>
		                <th data-options="field:'rolename',width:120,sortable:true">角色名称</th>
		            </tr>
		        </thead>
		    </table>
		    <div id="toolbar">
		    	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newDialog()">添加</a>
		    	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editor()">修改</a>
		    	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="del()">删除</a>
		   	</div>
		   	<!-- 添加面板区域 -->
		   	<div id="dlg" class="easyui-dialog" title="添加楼宇信息" style="width:550px;height:320px;padding:10px 20px"
		   		 data-options="iconCls:'icon-save',closed:true,modal:true,buttons:'#dlg-buttons',cache:false">
		   		<div class="ftitle" style="text-align:center">ADD ROLE</div>
		   		<form:form id="fm" action="" method="post" commandName="role">
				<table border="0" style="margin-top:15px;line-height:28px" cellspacing="0" cellpadding="0">
					<tr>
						<td><form:label path="rolecode">ROLE_NAME</form:label></td>
						<td><form:input path="rolecode" class="required"/></td>
						<td>&nbsp;</td>
						<td><form:label path="rolename">ROLE_NAME</form:label></td>
						<td><form:input path="rolename" class="required"/></td>
					</tr>
				</table>
				</form:form>
		   	</div>
		   	<div id="dlg-buttons">
		   		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="save()" id="btn1">保存</a>
		   		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
		   	</div>
	    </div>
	</div>
</body>
</html>